<template>
	<view class="editAddress">
		<view class="name box">
			<text>收货人</text> <input type="text" v-model="data.userName" placeholder-style="color:#777" placeholder="请输入姓名" />
		</view>
		<view class="phone box">
			<text>手机号码</text> <input type="number" v-model="data.mobile" placeholder-style="color:#777" placeholder="请输入手机号" />
		</view>
		<view class="city box">
			<text>所在地区</text> 
			<view class="region" @tap="openPicker">
				<text class="placeholder" v-if="region == ''">请选择所在地区</text>{{region}}
			</view>
			 <!-- <textarea class="region" @tap="openPicker" type="butten" disabled="true" :value="region"  placeholder="请选择所在地区"></textarea> -->
		</view>
		<view class="address box">
			<text>详细地址</text> 
			<textarea auto-height  v-model="data.detailAddress" placeholder-style="color:#777" placeholder="请输入详细地址"></textarea>
		</view>
		<view class="setDefault box">
			<text>设为默认地址</text>
			<switch class="switch" color="#F63810" :checked="isChecked" @change="switchChange" />
		</view>
		<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
		<view class="saveBtn" @tap="submit">
			保存
		</view>
	</view>
</template>

<script>
	import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue"
	export default {
		components: {
			"lotus-address": lotusAddress
		},
		data() {
			return {
				isAdd: true,
				data: {
					userName: "",
					mobile: "",
					region: "",
					detailAddress: "",
					defaultAddress: 0
				},
				lotusAddressData: {
					visible: false,
					provinceName: "",
					cityName: "",
					townName: ""
				},
				region: "",
				isChecked: false,
				disabled: false

			}
		},
		onLoad(e) {
			if (e.data) {
				this.isAdd = false;
				this.data = JSON.parse(decodeURIComponent(e.data));
				console.log(this.data)
				this.region = this.data.address;
				if (this.data.defaultAddress == 1) {
					this.isChecked = true;
				}
			} else {
				this.isAdd = true;
				uni.setNavigationBarTitle({
					title: '添加收货地址'
				})
				this.data.defaultAddress = 0
			}


		},
		methods: {
			//打开picker
			openPicker() {
				this.lotusAddressData.visible = true;
			},
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				console.log(res);
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.region = `${res.province}-${res.city}-${res.town}`; //region为已选的省市区的值
				}
			},
			switchChange(e) {
				if (e, e.target.value == true) {
					this.data.defaultAddress = 1
				} else {
					this.data.defaultAddress = 0
				}
			},
			submit() {
				if (this.data.userName.length == 0) {
					uni.showToast({
						title: "请输入用户名",
						icon: "none"
					})
					return false;
				}
				if (this.data.mobile.length == 0) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return false;
				} else if (!(/^1[3456789]\d{9}$/.test(this.data.mobile))) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return false;
				}
				if (this.region.length == 0) {
					uni.showToast({
						title: "请选择收货地区",
						icon: "none"
					})
					return false;
				}
				if (this.data.detailAddress.length == 0) {
					uni.showToast({
						title: "请输入详细地址",
						icon: "none"
					})
					return false;
				}

				if (this.disabled == true) {
					return false;
				}
				this.disabled = true;
				let data = {
					"address": this.region,
					"addressId": this.data.addressId,
					"defaultAddress": this.data.defaultAddress,
					"detailAddress": this.data.detailAddress,
					"mobile": this.data.mobile,
					"userName": this.data.userName,
				}
				if (this.isAdd == false) {
					this.$http.post('/api/v1.0/user/address/update/address', data, res => {
						if (res.data.data.msg == '000000') {
							uni.showToast({
								title: "修改成功",
								icon: "none"
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.data.data,
								icon: "none"
							})
						}
						this.disabled = false
					})
				} else {
					this.$http.post('/api/v1.0/user/address/add/address', data, res => {
						if (res.data.data.msg == '000000') {
							uni.showToast({
								title: "添加成功",
								icon: "none"
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.data.data,
								icon: "none"
							})
						}
					},fail=>{},complete=>{
						console.log(complete)
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	
	.editAddress {
		min-height: 100vh;
		background-color: #f2f2f2;
		position: relative;
		
		.box {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			background-color: #fff;
			padding: 0 28upx;
			color: #333;
			
			text {
				font-size: 30upx;
				margin-right: 50upx;
				width: 130upx;
			}

			input {
				min-height: 80upx;
				font-size: 30upx;
			}
			.region{
				width: 560upx;
				min-height: 90upx;
				display: flex;
				align-items: center;
				font-size: 30upx;
				.placeholder{
					color: #777;
					display: block;
					width: 300upx;
					padding-left: 10upx;
				}
			}
			&.setDefault {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text {
					width: 200upx;
				}
				.switch {
					transform: scale(0.6);

				}
			}
		}
		.address{
			display: flex;
			align-items: flex-start !important;
			padding-top: 20upx;
			textarea{
				min-height: 100upx;
				width: 500upx;
				font-size: 30upx;
			}
		}
		.saveBtn {
			background: linear-gradient(0deg, rgba(232, 39, 27, 1), rgba(250, 94, 52, 1));
			position: absolute;
			bottom: 100upx;
			left: 40upx;
			width: 670upx;
			border-radius: 44upx;
			color: #fff;
			font-size: 36upx;
			text-align: center;
			height: 88upx;
			line-height: 88upx;
		}
	}
</style>
